<template>
  <div class="wrapper">
    <!-- 顶部头部 -->
    <el-header height="60px" :style="{ 'background-color':'#5589B1' }">

      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">

        <div style="margin: 10px;float: left">
          <img
            src="../assets/element-logo.svg"
            alt="element-logo"
            class="header-logo" style="float: left">
        </div>
        <div style="margin: 10px;float: left">
          <el-input placeholder="请输入内容" v-model="input3" class="input-with-select"
                    style="background-color:  rgb(84, 92, 100);">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>

        <el-menu-item index="1">处理中心</el-menu-item>
        <el-submenu index="2">
          <template slot="title">我的工作台</template>
          <el-menu-item index="/yready/index">项目</el-menu-item>
          <el-menu-item index="/yready/now">now</el-menu-item>
          <el-menu-item index="/yready/isay">isay</el-menu-item>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项1</el-menu-item>
            <el-menu-item index="2-4-2">选项2</el-menu-item>
            <el-menu-item index="2-4-3">选项3</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
      </el-menu>


    </el-header>
    <!-- 中间区域 -->
    <el-container class="main">

      <el-row style="width: 100%;">
        <el-col :xs="24" :sm="22" :md="5" :lg="5" :xl="5">


          <!-- 左侧菜单栏 -->
          <el-aside class="menu" style="margin-left:20px;padding-right: 20px;width: 100%;">
            <template>
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="活动项目" name="first">
                  <el-tabs :tab-position="tabPosition" type="card" style="height: 500px;">
                    <el-tab-pane label="全部">

                      <el-col :span="24">
                        <el-card shadow="hover">
                          <span>项目1</span>
                          <div class="bottom clearfix">
                            <time class="time">{{ currentDate }}</time>
                          </div>
                        </el-card>
                      </el-col>

                    </el-tab-pane>

                    <el-tab-pane
                      :key="item.y_enum_val"
                      v-for="(item, index) in fordate"
                      :label="item.y_enum_showname"
                      :name="item.y_enum_val"
                    >

                      <div v-for="(item1, index) in item.projectlist">
                        <el-col :span="24" style="margin-bottom: 5px;">
                          <el-card shadow="hover" @click.native="handleCardClick(item1.id)" >
                            <span> {{item.y_enum_showname}} - {{item1.y_project_name}} / {{item1.id}}</span>
                            <div class="bottom clearfix">
                              <time class="time">{{ item1.cdate }}</time>
                            </div>
                          </el-card>
                        </el-col>
                      </div>

                    </el-tab-pane>

                  </el-tabs>
                </el-tab-pane>
                <el-tab-pane label="归档项目" name="second">
                  <el-tabs :tab-position="tabPosition" type="card" style="height: 500px;">
                    <el-tab-pane label="全部">
                      <el-col :span="24">
                        <el-card shadow="hover">
                          <span>项目2</span>
                          <div class="bottom clearfix">
                            <time class="time">{{ currentDate }}</time>
                          </div>
                        </el-card>
                      </el-col>

                    </el-tab-pane>
                    <el-tab-pane label="工作">工作</el-tab-pane>
                    <el-tab-pane label="生活">生活</el-tab-pane>
                    <el-tab-pane label="身体">身体</el-tab-pane>
                    <el-tab-pane label="兴趣">兴趣</el-tab-pane>
                  </el-tabs>
                </el-tab-pane>
              </el-tabs>
            </template>
          </el-aside>
        </el-col>
        <el-col :xs="24" :sm="22" :md="12" :lg="12" :xl="12">


          <!-- 展示页-->
          <el-main class="content" style="margin-top: -8px;">
            <!-- 展示页面 -->
            <router-view class="table-block">

            </router-view>

          </el-main> <!-- 展示页 结束-->

        </el-col>
        <el-col :xs="24" :sm="22" :md="4" :lg="4" :xl="4">

          <template v-if="quotes != null">
            <div><!--做成组件-->
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>{{quotes.y_quotes_name }}</span>
                  <el-button style="float: right; padding: 3px 0"
                             @click.native="quotesClick(quotes.id)" type="text" >下一个</el-button>
                </div>
                <div>
                  {{ quotes.y_quotes_content }}
                </div>
                <!--<div v-for="o in 4" :key="o" class="text item">
                  {{'列表内容 ' + o }}
                </div>-->
              </el-card>
            </div>
          </template>

        </el-col>
      </el-row>
    </el-container><!-- 中间区域 -->
  </div>
</template>

<script>

  import {yprojectlist
    ,ylayoutdata
    ,ygetquotes
  } from "@/api/yready";

  export default {
    created() {
      console.log("created：layout");
      this.init();
    },
    mounted() {},
    data() {
      console.log("data：layout");
      return {
        activeIndex2: '1',
        activeName: 'second',
        tabPosition: 'left',
        currentDate: new Date(),
        quotes:null
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
        this.$router.push(key); //跳转到指定页面

      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleCardClick:function(id) {
        console.log("handleCardClick："+id);
        // console.log(this.$route,"route")
        this.$router.push({name:this.$route.name,query:{pid:id}});//这里不对，现在已经点击的是项目了，应该查idea，传的是pid 不是ptype

      },
      quotesClick:function (id) {
        console.log("quotesClick：layout");
        ygetquotes({id:id}).then(res=>{
          if(res.data.quotes!== null){
            this.quotes = res.data.quotes;
          }
        })
      },
      init() {
        console.log("init：layout");
        ylayoutdata()
          .then(res => {
            this.fordate = res.data.projecttype;
            if(res.data.quotes!== null){
              this.quotes = res.data.quotes;
            }
            this.activeName = "first";//先指向2，获取数据后，在指向1，解决 第一次 没有显示问题。
          })
      }
    }
  };
</script>

<style>
  el-input {
    width: 130px;
  }

  .input-with-select {
    background-color: #fff;
  }

  el-tab-pane {
    text-align: left;
  }

  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .table-block {
    margin-top: 12px;
    padding: 10px;
    border: 1px solid #ebebeb;
    border-radius: 3px;
    transition: .2s;
  }

  .main {
    clear: both;
  }
</style>
